<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>红岩导航</title>
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="css/animate.css">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script>
	</head>
	<body>
		<!-- top -->
		<!-- 209010238薛本莲 -->
		<header class="head">
			<div class="headLeft animate__animated animate__slideInLeft">
				<a href="#">
					<img src="img/logo.png">
				</a>
			</div>
			<div class="headRight animate__animated animate__slideInRight">
				<div class="Rsection">
					<a href="#">
						<img src="img/icon-18.png" alt="">
					</a>
					<!-- UL -->
					<p class="headeUL">
						<a href="#" v-for="n in headUlData">{{n}}</a>
					</p>
					<!-- 搜索框 -->
					<div class="search">
						<input type="text" class="searchFrame" placeholder="请输入搜索关键词">
						<span class="searchWord"><a href="#">搜索</a></span>
					</div>
				</div>
				
			</div>
		</header>
		<!-- top end -->
		
		<!-- nav -->
		<nav class="nav">
			<!-- 一级菜单 -->
			<ul class="nav-ul">
				<li v-for="n in navUlData" @mouseenter="subShow(n)" @mouseleave="subHidden(n)">
					<a href="#" class="navTitle">
						{{n.menus}}
						<span>{{n.english}}</span>
					</a>
					
					<!-- 二级菜单 -->
					<ul class="subMenu" v-show="n.show">
						<!-- 访问subMenu数据，要通过n -->
						<li v-for="sub in n.subMenu">
							<a href="#">{{sub.subName}}</a>
						</li>
					</ul>
					<!-- 二级菜单 end -->
				</li>
			</ul>
			<!-- 一级菜单 end -->
		</nav>
		<!-- nav end -->
	</body>
	<script src="Js/Vue.js"></script>
</html>
